<template>
  <div class="main">
    <h1>VelTree 测试</h1>
    <div style="width:30%">
      <VelTree class="mytree"
               :inputPlaceHolder="inputPlaceHolder"
               :hasInput="true"
               :clearable="true"
               :size="size"
               :treeData="treeData"
               :emptyText="emptyText"
               :defaultProp="defaultProps"
               :nodeKey="nodeKey"
               :expandOnClickNode="true"
               :defaultExpandedKeys="defaultExpandedKeys"
               :defaultExpandAll="false"
               :showCheckbox="true"
               :defaultCheckedKeys="defaultCheckedKeys"
               :highlightCurrent="true"
               :checkOnClickNode="false"
               :checkStrictly="true"
               :iconClass="iconClass"
               :lazy="false"
               :hasRenderContent="true"
               :filterFields="filterFields"
               @loadNodeData="loadNode"
               @handleNodeClick="handleNodeClick"
               @handleCheckChange="handleCheckChange"
               @append="append"
               @remove="remove"
               @edit="edit"
               ref="mytree">
      </VelTree>
    </div>
  </div>
</template>
<script>
import VelTree from '../tree/index'
export default {
  components: { VelTree },
  data () {
    return {
      inputPlaceHolder: '请输入内容',
      size: "small  ",
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      treeData: [{
        id: 1,
        title: '节点1',
        code: 'a',
        children: [{
          id: 4,
          title: '节点 1-1',
          code: 'a',
          children: [{
            id: 9,
            code: 'a',
            title: '节点 1-1-1'
          }, {
            id: 10,
            code: 'a',
            title: '节点 1-1-2'
          }]
        }]
      }, {
        id: 2,
        title: '节点2',
        code: 'a',
        children: [{
          id: 5,
          code: 'a',
          title: '节点 2-1'
        }, {
          id: 6,
          code: 'a',
          title: '节点 2-2'
        }]
      }, {
        id: 3,
        title: '节点 3',
        code: 'a',
        children: [{
          id: 7,
          title: '节点 3-1',
          code: 'a'
        }, {
          id: 8,
          code: 'a',
          title: '节点 3-2',
          disabled: true
        }]
      }],
      emptyText: '没有数据',
      nodeKey: 'id',
      defaultExpandedKeys: [1],
      defaultCheckedKeys: [2],
      iconClass: '',
      filterFields: 'code||title',
    }
  },
  methods: {
    // 懒加载 lazy 为 true 时候触发
    loadNode (node, resolve) {
      if (node.level === 0) {
        return resolve([{ title: '根节点' }]);
      }
      if (node.level > 1) return resolve([]);

      setTimeout(() => {
        const data = [{
          title: '叶子节点1',
          leaf: true
        }, {
          title: '测试节点'
        }];

        resolve(data);
      }, 500);
    },
    append (data) {
      console.log('append')
    },
    remove (node, data) {
      console.log('remove')
    },
    edit (node, data) {
      console.log('edit')
    },
    // 节点点击事件
    handleNodeClick (data) {
      console.log('节点点击事件')
    },
    handleCheckChange (data, checked, indeterminate) {
      console.log('勾选事件')
    },

  }
}
</script>
<style scoped>
/* 方式1 */
.v-eltree >>> .el-tree {
  margin-top: 10px;
}
</style>
